<template>
	<view>
		<view class="pay-container">
			<view class="pay-header">
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序中不显示按钮 -->
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<!-- 非微信小程序平台（包括iOS和Android）显示按钮 -->
				<view class="back-icon">
					<uni-icons type="left" size="25" @click="toOrderDetailWaitPay()"></uni-icons>
				</view>
				<!-- #endif -->
				<view class="title">
					支付收银台
				</view>
			</view>
			<view class="pay-content">
				<view class="pay-total-price">
					<view class="total-price">
						￥<text class="big-font">{{totalPrice}}</text>
					</view>
					<view class="limit-time">
						支付剩余时间 {{countDown}}
					</view>
				</view>
				<view class="pay-way">
					<view class="pay-way-item" v-for="(item, index) in payWayList" :key="index"
						@click="choose(item.id)">
						<view class="pay-way-item-left">
							<view class="pay-way-icon">
								<img class="pay-icon" :src="item.payWayImg" alt="" />
							</view>
							<view class="pay-way-name">
								{{item.payWayName}}
							</view>
						</view>

						<view class="pay-way-item-right">
							<uni-icons class="select-icon" type="circle" color="#d3d3d3" size="25"
								v-show="!item.isSelect"></uni-icons>
							<uni-icons class="select-icon" type="checkbox-filled" color="#ff2d2de2" size="25"
								v-show="item.isSelect"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pay-btn-box">
			<view class="pay-btn">
				{{payBtnName}}<text v-show="payBtnNameId==0">支付</text>
				<text class="small-font">￥</text><text class="weight-font">{{totalPrice}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		watch,
		reactive,
		watchEffect,
	} from 'vue';
	import {
		PAY_WAY_DICT
	} from '@/common/payWay.js'
	import { generateOrderNumber } from '@/common/orderNumberGenerator.js';
	import { onShow, onHide, onUnload, onLoad } from '@dcloudio/uni-app';

	const payWayList = ref(PAY_WAY_DICT);
	const payBtnName = ref(null);
	const payBtnNameId = ref(0);
	const orderNumber = ref(null);
	//订单创建时间初始化
	const orderCreateTime = ref(null);
	const choose = (id) => {
		payBtnNameId.value = id;
		payWayList.value.forEach((item) => {
			item.isSelect = false;
		});
		const selectedItem = payWayList.value.find(item => item.id === id);
		if (selectedItem) {
			payBtnName.value = selectedItem.payWayName;
			selectedItem.isSelect = true;
		}
	};

	let allData = ref(null);

	
	const canUnload = ref(true);
	
	// 页面卸载时的逻辑
	onLoad(() => {
	wx.setNavigationBarOption({
	  frontColor: '#000000',
	  backgroundColor: '#ffffff',
	  borderStyle: 'white', // 导航栏底部边框的颜色，仅支持 black / white
	  autoBackButton: false // 是否自动显示返回按钮，默认为 true
	});
	  // 这里可以添加你希望在页面卸载时触发的逻辑
	});


	const toOrderDetailWaitPay = () => {

		uni.showModal({
			content: '支付未完成，是否离开？',
			confirmText: '离开',
			cancelText: '取消',
			confirmColor: '#ff2d2de2',
			success: (res) => {
				if (res.confirm) {


					const toOrderDetailData = {
						allData: allData.value,
						time: countDown.value,
						setOrderStatus: 2,
						orderCreateTime:orderCreateTime.value,
						orderNumber:orderNumber.value
					}
					uni.setStorage({
						key: 'toOrderDetail',
						data: toOrderDetailData,
						success: function() {
							console.log('数据存储成功');
							uni.redirectTo({
								url: "/pages/orderdetail/orderdetail"
							})
						},
						fail: function(err) {
							console.error('数据存储失败', err);
						}
					});


				} else if (res.cancel) {
					// 用户点击了取消，什么也不做
					console.log('用户点击了取消');
				}
			},
			fail: (err) => {
				console.error('模态对话框调用失败', err);
			}
		});
	}
	const countDown = ref("15:00");
	const timer = ref(null);
	const endTime = ref(null);

	const totalPrice = ref(0);

	const formatTime = (seconds) => {
		const minutes = Math.floor(seconds / 60);
		const remainingSeconds = seconds % 60;
		return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
	};

	const payCountDown = () => {
		const totalSeconds = 15 * 60; // 15分钟转换为秒
		let remainingSeconds = totalSeconds;

		timer.value = setInterval(() => {
			if (remainingSeconds > 0) {
				remainingSeconds -= 1;
				countDown.value = formatTime(remainingSeconds);
			} else {
				clearInterval(timer.value);
				// 倒计时结束，可以在这里处理相关逻辑
			}
		}, 1000);
	};

	onMounted(() => {
		choose(payWayList.value[0].id);
		orderNumber.value = generateOrderNumber();
		payCountDown();
		
		orderCreateTime.value= new Date();
	  const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
	  const year = orderCreateTime.value.getFullYear();
	  const month = orderCreateTime.value.getMonth() + 1; // 月份是从0开始的，所以需要加1
	  const date = orderCreateTime.value.getDate();
	  const dayOfWeek = daysOfWeek[orderCreateTime.value.getDay()];
	  const hours = orderCreateTime.value.getHours();
	  const minutes = orderCreateTime.value.getMinutes();
	  const seconds = orderCreateTime.value.getSeconds();
	  if(hours<10){
		  	orderCreateTime.value = year+'-'+month+'-'+date+' '+'0'+hours+':'+minutes+':'+seconds;
	  }else{
		  orderCreateTime.value = year+'-'+month+'-'+date+' '+hours+':'+minutes+':'+seconds;
	  }


		uni.getStorage({
			key: 'toPay',
			success: function(res) {
				console.log('获取的支付数据:', res.data);
				totalPrice.value = res.data.orderData.totalPrice;
				allData.value = res.data;

			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});
	});

	onUnmounted(() => {
		if (timer.value) {
			clearInterval(timer.value);
		}


	});
</script>

<style lang="scss" scoped>
	.pay-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		display: block;
		background: #f8f8fe;
		color: #333;

		.pay-header {
			float: left;
			width: 100%;
			height: 50px;
			display: flex;
			z-index: 1000;
			background: #f9eaef;
			box-sizing: border-box;
			text-align: center;
			justify-content: center;
			align-items: center;

			.title {
				position: absolute;
				line-height: 50px;
				font-size: 18px;
				z-index: 5;
				height: 50px;
			}

			.back-icon {
				z-index: 10;
				position: absolute;
				left: 10px;
			}
		}

		.pay-content {
			width: 100%;
			height: auto;
			float: left;
			box-sizing: border-box;

			.pay-total-price {
				width: 100%;
				height: 100px;
				background: #f9eaef;

				.total-price {
					width: 100%;
					height: 50px;
					line-height: 65px;
					text-align: center;
					font-size: 14px;

					.big-font {
						font-size: 24px !important;
						font-weight: bold;
					}
				}

				.limit-time {
					width: 100%;
					height: 50px;
					line-height: 45px;
					text-align: center;
					font-size: 13px;
				}
			}

			.pay-way {
				width: 100%;
				height: 96px;
				background: #fff;
				box-sizing: border-box;
				padding: 0px 20px;
				margin-top: 15px;

				.pay-way-item {
					width: 100%;
					height: 48px;
					border-bottom: 1px solid #ddd;

					.pay-way-item-left {
						float: left;
						width: calc(100% - 30px);
						height: 48px;

						.pay-way-icon {
							float: left;
							width: 30px;
							height: 48px;
							box-sizing: border-box;
							padding: 14px 0px;

							.pay-icon {
								width: 20px;
								height: 20px;
							}
						}

						.pay-way-name {
							font-size: 14px;
							line-height: 48px;
						}
					}

					.pay-way-item-right {
						float: right;
						width: 20px;
						height: 48px;

						.select-icon {
							line-height: 48px;
						}
					}
				}

				.pay-way-item:last-child {
					border-bottom: none;
				}
			}

		}
	}

	.pay-btn-box {
		width: 100%;
		height: 80px;
		background: #fff;
		box-sizing: border-box;
		padding: 20px 15px;
		position: fixed;
		bottom: 0px;
		box-shadow: 0px 0px 4px 0px #d3d3d3;

		.pay-btn {
			width: 100%;
			box-sizing: border-box;
			padding: 0px 15px;
			height: 40px;
			font-size: 14px;
			background: #ff2d2de2;
			color: #fff;
			border-radius: 4px;
			line-height: 40px;
			text-align: center;

			.small-font {
				font-size: 12px !important;
			}

			.weight-font {
				font-weight: bold;
				font-size: 18px !important;
			}
		}
	}
</style>